<template>
    <div>
        <div class="all">
            <el-tag type="primary" style="position:absolute;top:20px;left:50px;">黑白名单库/总数：{{ total }}</el-tag>
            <el-select v-model="value" placeholder="Select" style="width: 120px;position:absolute;top:20px;left:720px;">
                <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                </el-option>
            </el-select>
            <el-table :data="tableData" style="width: 800px;height:500px;position:absolute;top:60px;left:50px;">
                <el-table-column prop="listId" label="ID" width="150" />
                <el-table-column prop="listJudge" label="状态" width="180"
                    :filters="[{ text: '白名单', value: 0 }, { text: '黑名单', value: 1 }]">
                    <template #default="scope">
                        <el-tag class="table-tag" type="primary" v-if="scope.row.listJudge === 0">白名单</el-tag>
                        <el-tag class="table-tag" type="info" v-else>黑名单</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="listPath" label="名单" width="300" />
                <el-table-column fixed="right" label="Operations" min-width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row.listId)">
                            Remove
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination background layout="prev, pager, next" :total="total"
                style="position:absolute;top:650px;left:230px;" @current-change="handlePageChange" />
        </div>
        <label style="position:absolute;color:white;top:130px;left:890px;font-size:20px;">添加名单</label>
        <div style="background-color: rgba(0, 0, 0, 0.6);width:500px;height:400px;position:absolute;top:180px;left:880px;border-radius: 5px;;">
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="30" class="demo-ruleForm" style="position:absolute;top:100px;left:100px;">
            <el-form-item>
                <el-input v-model="ruleForm.urlPath" type="text" placeholder="地址" style="width:250px;" />
            </el-form-item>
            <el-select v-model="ruleForm.judge" placeholder="选择加入" style="width: 250px;position:absolute;left:30px;top:70px;">
                <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                </el-option>
            </el-select>
            <el-form-item>
                <el-button type="primary" @click="submitForm()"
                    style="position: relative;top:105px;left:25px;">
                    添加
                </el-button>
                <el-button @click="resetForm()" style="position: relative;top:105px;left:85px;">清空</el-button>
            </el-form-item>
        </el-form>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted,watch } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
const tableData = ref();
const total = ref()
const nowPage = ref(1)
import { serverAddress } from '@/config'
const ruleForm = ref({
    urlPath: '',
    judge: null,
})
const option = [
    {
        value: 'Black',
        label: '黑名单',
    },
    {
        value: 'White',
        label: '白名单',
    }
]
const option1 = [
    {
        value: 1,
        label: '黑名单',
    },
    {
        value:0,
        label: '白名单',
    }
]
const value = ref('')

watch(value, async (newVal, oldVal) => {
    if (newVal !== oldVal) {
        nowPage.value=1
        if (newVal === 'Black') {
            console.log(value.value);
            await getInformation(nowPage.value, 1)
        }
        if (newVal === 'White') {
            console.log(value.value);
            await getInformation(nowPage.value, 0)
        }
        // await getInformation(page.value, newVal);  
    }
});
//分开查看黑白名单
function getInformation(page, judge) {
    axios({
        url: 'https://apifoxmock.com/m2/4743995-0-default/193747692',
        // url:`${serverAddress}/list/ListPageWithOutBlack`,
        method: 'GET',
        params: {
            pageNum: page,
            judge: judge,
        }
    }).then((response) => {
        if (response.data.code === 1) {
            nowPage.value = page
            console.log('分页', response.data.data)
            tableData.value = response.data.data.lists
            total.value = response.data.data.total
        } else {
            ElMessage({
                message: '数据获取失败',
                type: 'warning',
            })
        }
    }).catch((error) => {
        console.log('获取错误', error)
        ElMessage({
            message: '数据获取失败',
            type: 'warning',
        })
    })
}
//简单分页
function getInformation2(page) {
    axios({
        url: 'https://apifoxmock.com/m2/4743995-0-default/193747161',
        // url:`${serverAddress}/list/ListPage?pageNum=${page}`,
        method: 'GET',
    }).then((response) => {
        if (response.data.code === 1) {
            nowPage.value = page
            console.log('分页', response.data.data)
            tableData.value = response.data.data.lists
            total.value = response.data.data.total
        } else {
            ElMessage({
                message: '数据获取失败',
                type: 'warning',
            })
        }
    }).catch((error) => {
        console.log('获取错误', error)
        ElMessage({
            message: '数据获取失败',
            type: 'warning',
        })
    })
}
function deleteRow(Id) {
    axios({
        url: 'https://apifoxmock.com/m2/4743995-0-default/193689348',
        // url:`${serverAddress}/list/deleteListByListId`,
        method: 'GET',
        params: {
            listId: Id,
        }
    }).then((response) => {
        if (response.data.code === 1) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            getInformation2(nowPage.value)
        } else {
            ElMessage({
                message: '删除失败1',
                type: 'warning',
            })
        }
    }).catch((error) => {
        ElMessage({
            message: '删除失败2',
            type: 'warning',
        })
    })
}
onMounted(() => {
    console.log('发送请求');
    getInformation2(1)
})
function handlePageChange(newPage) {
    console.log('当前页码：', newPage);
    if (value.value === '') {
        getInformation2(newPage)
    }
    if (value.value === 'Black') {
        console.log(value.value);
        getInformation(newPage.value, 1)
    }
    if (value.value === 'White') {
        console.log(value.value);
        getInformation(newPage.value, 0)
    }
}

const resetForm = () => {
    console.log(ruleForm.value.judge)
    ruleForm.value.urlPath = '';
    ruleForm.value.judge = null;
}
function submitForm(){
    if(ruleForm.value.urlPath!==''&&ruleForm.value.judge!==null){
    axios({
        // url:'https://apifoxmock.com/m2/4743995-0-default/193689108',
        url:`${serverAddress}/list/newList`,
        method:'POST',
        data:{
            urlPath:ruleForm.value.urlPath,
            judge:ruleForm.value.judge,
        }
    }).then((response)=>{
        if(response.data.code===1){
            ElMessage({
                message: '添加成功',
                type: 'success',
            })
        }else{
            ElMessage({
                message: '添加失败1',
                type: 'warning',
            })
        }
    }).catch((error)=>{
        ElMessage({
                message: '添加失败2',
                type: 'warning',
            })
    })
}else{
    ElMessage({
                message: '请填写完整',
                type: 'info',
            })
}
}
</script>
<style scoped>
.all {
    background-color: rgba(0, 0, 0, 0.3);
    /* background-color:black; */
    height: 635px;
    width: 100%;
    position: absolute;
    top: 80px;
}
</style>